﻿
@{
    ViewData["Title"] = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="~/js/VueTreeSelect.js"></script>
<div id="divForm" style="margin:2px;padding:2px;">
    <el-form :model="form" label-width="120px">
        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item label="栏目名称" required>
                    <el-input v-model="form.name" placeholder="在此处输入栏目名称"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item label="栏目编码" required>
                    <el-input v-model="form.code" placeholder="在此处输入栏目编码"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item label="栏目别名" required>
                    <el-input v-model="form.alisa" placeholder="在此处输入栏目别名"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item label="父节点" required>
                    <tree-select :data="chanelList"
                                 :defaultprops="defaultprops"   v-model="form.parentId"
                                 :nodekey="nodekey" :checkedkeys="defaultcheckedkeys"
                                 v-on:popoverhide="popoverhide"></tree-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item label="状态">
                    <el-radio-group v-model="form.enabled">
                        <el-radio :label='true'>启用</el-radio>
                        <el-radio :label='false'>禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item label="关键字" required>
                    <el-input v-model="form.keyword" placeholder="在此处输入栏目关键字"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item label="描述" required>
                    <el-input v-model="form.description" placeholder="在此处输入栏目描述"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item label="排序号" required>
                    <el-input v-model="form.orderIndex" type="number"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item>
            <el-button type="primary" @@click="SaveBaseSettings()" size="mini" v-show="pageButtons.includes('savechanel')">保存</el-button>
            <el-button @@click="Back()" size="mini">返回</el-button>
        </el-form-item>
    </el-form>

</div>
<style scoped>
    .mask {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0;
    }

    .common-tree {
        overflow: auto;
    }
</style>

<style>
    .tree-select .el-select__tags .el-tag .el-tag__close {
        display: none;
    }

    .tree-select .el-select__tags .el-tag .el-icon-close {
        display: none;
    }
</style>
<script>

    var vueProject = new Vue({
        el: '#divForm',
        data() {
            return {
                pageButtons: [],

                chanelList:[],
                defaultprops: {
                    children: 'children',
                    label: 'name'
                },
                nodekey: 'id',
                defaultcheckedkeys: [],

                form: {
                    id: parseInt(getQueryString("id")||0),
                    name: "",
                    code:"",
                    alisa: "",
                    parentId:0,
                    keyword:"",
                    description: "",
                    orderIndex:0
                }
            }
        },
        created() {
            var _this = this;
            _this.GetChanelList();

            _this.GetChanel();


            _this.$getMenuButtons();
        },
        methods: {
            popoverhide: function (checkedIds, checkedData) {
                this.form.parentId = checkedIds;
            },
           GetChanelList() {
                  var _this = this;
               _this.$get("@Url.Action("GetChanelListTree", "Chanel")").then((response) => {
                   _this.chanelList = JSON.parse( JSON.stringify(response));
                  }).catch((error) => {
                  });
            },
            GetChanel() {
                var _this = this;
                _this.$get("@Url.Action("GetChanel", "Chanel")?id="+_this.form.id ).then((res) => {
                    _this.form = res;
                    _this.defaultcheckedkeys = _this.form.parentId;
                });
            },
            SaveBaseSettings() {
                var _this = this;
                _this.form.orderIndex = parseInt(_this.form.orderIndex || 0);
                _this.form.parentId = parseInt(_this.form.parentId || 0);
                _this.$post("@Url.Action("SaveChanel", "Chanel")", _this.form).then((res) => {
                    _this.$success(res.message, function () {
                        _this.$back(true);
                    });
                });
            },
            Back() {
                this.$back();
            }
        }
    });
</script>

